<template>
  <div>
    {{money}}
 <div>
    <!-- 1给按钮绑定点击事件 -->
  <!-- 2修改money ++ -->
  <!-- v-on 指令：绑定事件 -->
  <!-- 语法：
  v-on：事件名=“少量代码”
  v-on：事件名=“事件处理函数”
  v-on：事件名=“事件处理函数（参数）”
  简写 @事件名=“事件处理函数” -->
<button v-on:click="money++">+1</button>
<button v-on:click="addMoney">+10</button>

<!-- 注意 传统理解中 函数名（）表示调用该函数 -->
<!-- 但是在此处 不是调用函数 而是绑定事件 当事件触发时传入指定的参数 -->
<button @click="addCMoney(2)">+2</button>
<button @click="addCMoney(20)">+20</button>

  </div>
  </div>
 

</template>

<script>
export default {
//定义数据
  data() {
    return {
      money:1000
    };
  },

  mounted() {
    
  },

  methods: {
    addMoney(){
      //判断如果money到了2000就不允许加了
      if (this.money >=2000) return
      this.money += 10
    },
    addMoney(num){
   this.money += num
    }
  },
};
</script>

<style lang="scss" scoped>

</style>